<!-- 我正在开发 我是王运 QQ：1966908862 昵称：Coffee。cup -->
<template>
	<view class="page">
		<!-- <scroll-view scroll-y="true" :style="{ height: height + 'px' }" upper-threshold="500" @scrolltoupper="ctrlBtn" @scrolltolower="loadmore"> -->
			<!-- 列表项循环 -->
			<block v-for="(item, index) in list" :key="index">
				<!-- 滑动列表项 -->
				<my-swipe-action-item
					:options="options"
					@swipeClick="swipeClick($event, item)"
					@swipeChange="swipeChange($event, index)"
					:show="activeIndex == index"
					@change="change(item)"
				>
					<!-- 边界 -->
					<view style="width: 20rpx;"></view>
					<!-- 头像 -->
					<view class="view_img"><image :src="item.photo_id+'?x-oss-process=image/resize,w_150'" mode="aspectFill" class="img"></image></view>
					<!-- 姓名 -->
					<text class="names">{{ item.name }}</text>
					<!-- 锁图标 -->
					<image :src="img_lock" class="img_lock"></image>
					<!-- 密码 -->
					<text class="pws">{{ item.role=='0'?'管理员':'工作人员' }}</text>
					
				</my-swipe-action-item>
				<!-- item分割线 -->
				<view class="item-line"></view>
			</block>
			<!-- 加载更多 -->
			<view class="load-more">{{ loadtext }}</view>
		<!-- </scroll-view> -->
		<!-- 悬浮新增消毒人员按钮 -->
		<template v-if="visible">
			<uni-fab
				:pattern="pattern"
				:content="content"
				horizontal="right"
				vertical="bottom"
				:popMenu="false"
				@fabClick="register(0)"
			></uni-fab>
		</template>
		<!-- 删除确认弹窗 -->
		<xy-dialog title="提示" content="确认删除此消毒人员" :is_show="showDialog" @cancelButton="clickCancel" @confirmButton="clickConfirm"></xy-dialog>
	</view>
</template>

<script>
var count = 0;
// 初始化 uniCloud
import app from '@/common/app.js';
import fab from '@/components/uni-fab/uni-fab.vue'
	export default {
		components: {
			fab
		},
	data() {
		return {
			// 按钮显示
			isvisible: true,
			activeIndex: -1,
			height: '',
			loadtext: '加载中···',
			visible: true,
			img_lock: '/static/img_lock.png',
			showDialog: false,
			item_value: '', //item左滑时保存的数据
			item_m: '', // 列表条数
			i: 9,
			//按钮信息
			options: [
				{
					text: '重置',
					style: {
						backgroundColor: '#d0d0d0'
					}
				},
				{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}
			],
			//列表信息
			list: [],
			// 加号样式
			pattern: {
				buttonColor: '#6DDDCB'
			}
		};
	},
	//监听页面滚动
	onPageScroll(e){
		// console.log(e)
		if(e.scrollTop==0){
			this.ctrlBtn();
		}
	},
	
	// 监听触底动作
	onReachBottom(){
		this.loadmore();
	},
	onLoad() {
		// 初始化页面高度
		uni.getSystemInfo({
			success: res => {
				// this.height = res.windowHeight - uni.upx2px(50);
				this.height = res.windowHeight;
				console.log(this.height);
			}
		});
	},
	onShow() {
		this.getPerDate(); // 只要页面重新显示就获取人员列表
	},
	onHide() {
		this.activeIndex = -1;
	},
	methods: {
		// 滑动展开
		swipeChange(e, index) {
			// console.log(e,index);
			if (e) {
				this.activeIndex = index;
			}
		},
		// 获取并更新人员列表
		getPerDate(e) {
			// uni.showLoading({
			// 	title: '加载中......',
			// 	mask: true
			// }); //加载组件
			app.callFunction(
				'select_user',
				{
					limits: e //这个是控制获取数据的条数，实现分页
				},
				(data, res) => {
					// uni.hideLoading();
					if (res.data) {
						console.log('117  的 res', res);
						this.list = res.data; //列表赋值
						this.item_m = this.list.length; //保存一下请求出来的条数
						console.log('122  的 this.item_m', this.item_m);
						if (this.item_m < this.i) {
							//如果请求出来的数据小于现在的上限
							this.loadtext = '所有记录均以显示';
						}
					}
				}
			);
		},
		// 控制按钮显示隐藏
		ctrlBtn() {
			this.visible = true;
		},
		
		// 上拉加载更多
		loadmore() {
			// console.log('上拉加载');
			if (this.visible) {
				this.visible = false;
			}
			this.i = this.i + 10; //增加请求数据上限
			this.getPerDate(this.i);

			// console.log('143  的 this.item_m', this.item_m);
			// console.log('143  的 this.i', this.i);
			if (this.item_m < this.i) {
				//如果请求出来的数据小于现在的上限
				this.loadtext = '所有记录均以显示';
			}
		},
		// 跳转新增页
		register(e) {
			//如果是重置，带数据到重置页面
			uni.navigateTo({
				url:
					'../content/content?is_re=' +
					e +
					'&_id=' +
					this.item_value._id +
					'&name=' +
					this.item_value.name +
					'&password=' +
					this.item_value.password +
					'&photo_id=' +
					this.item_value.photo_id +
					'&role=' +
					this.item_value.role
			});
		},
		//对滑动item监听
		change(open) {
			console.log('当前开启状态：', open);
			this.item_value = open;
			// console.log('当前开启状态item_value 158：', this.item_value);
		},
		// 对左滑按钮的监听
		swipeClick(e, open) {
			// console.log('当前点击的是第' + e.index + '个按钮，点击内容是' + e.content);
			// console.log('点击内容是：', e);
			this.item_value = open;
			if (e.index == 1) {
				this.showDialog = true;
			} else if (e.index == 0) {
				this.register(1);
			}
		},
		//dialog按钮操作监听
		clickCancel() {
			this.showDialog = false;
		},
		clickConfirm() {
			// uni.showLoading({
			// 	title: '删除中......',
			// 	mask: true
			// });
			let that = this;
			let del_value = this.item_value;
			// 删除接口
			app.callFunction(
				'delete_user',
				{
					_id: del_value._id
				},
				(data, res) => {
					// uni.hideLoading();
					this.showDialog = false;
					// console.log('删除返回的结果：', res);
					if (res.success) {
						uni.showToast({
							title: '删除成功'
						});
						that.getPerDate();
						// 把上传的头像删除
						app.deleteFile(del_value.photo_id, res => {});
					} else {
						uni.showToast({
							icon:'none',
							title: '删除失败,'+res.message
						});
					}
				}
			);
		}
	}
};
</script>

<style lang="less" scoped>
// 每一个列表项
.line {
	border: none;
}
.page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #FFFFFF;
	min-height: 100%;
	height: auto;
}

/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url('~@/static/uni.ttf') format('truetype');
}

/* #endif */

/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

.example {
	padding: 0 15px 15px;
}

.example-info {
	padding: 15px;
	color: #3b4144;
	background: #ffffff;
}

.example-body {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	font-size: 14px;
	background-color: #ffffff;
}

/* #endif */
.example {
	padding: 0 15px;
}

.example-info {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 15px;
	color: #3b4144;
	background-color: #ffffff;
	font-size: 14px;
	line-height: 20px;
}

.example-info-text {
	font-size: 14px;
	line-height: 20px;
	color: #3b4144;
}

.example-body {
	flex-direction: column;
	padding: 15px;
	background-color: #ffffff;
}

.word-btn-white {
	font-size: 18px;
	color: #ffffff;
}

.word-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	height: 48px;
	margin: 15px;
	background-color: #007aff;
}

.word-btn--hover {
	background-color: #4ca2ff;
}

.cont {
	flex: 1;
	height: 90px;
	line-height: 90px;
	padding: 0 15px;
	position: relative;
	background-color: #fff;
	font-size: 15px;
	border-bottom-color: #f5f5f5;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	padding: 10px 0;
	background-color: #fff;
}

.button {
	border-color: #e5e5e5;
	border-style: solid;
	border-width: 1px;
	padding: 4px 8px;
	border-radius: 4px;
}

.button-text {
	font-size: 15px;
}
// 列表项的头像

.item_per {
	height: 140rpx;
	padding: 20rpx 1rpx;
	padding-left: 20rpx;
	.img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 90rpx;
	}
	// 列表项的姓名
	.names {
		font-size: 40rpx;
		height: 140rpx;
		width: 200rpx;
		line-height: 140rpx;
		padding: 1rpx 20rpx;
		color: #333;
	}

	.img_lock {
		width: 50rpx;
		height: 50rpx;
		padding: 45rpx 1rpx;
		padding-left: 100rpx;
	}
	.pws {
		font-size: 40rpx;
		height: 140rpx;
		padding: 45rpx 1rpx;
		text-align: left;
		color: #d4d4d4;
	}
}
.view_img {
	width: 145rpx;
	height: 145rpx;
	padding: 10rpx;
}
.img {
	width: 130rpx;
	height: 130rpx;
	border-radius: 90rpx;
	margin-top: 10rpx;
}
// 列表项的姓名
.names {
	font-size: 40rpx;
	width: 180rpx;
	padding: 50rpx 20rpx;
	color: #333;
}

.img_lock {
	width: 50rpx;
	height: 50rpx;
	padding: 50rpx 1rpx;
	padding-left: 70rpx;
}
.pws {
	font-size: 40rpx;
	padding: 50rpx 1rpx;
	text-align: left;
	color: #d4d4d4;
}
//item分割线
.item-line {
	height: 1px;
	width: 750rpx;
	transform: scaleY(0.3);
	background-color:rgba(0,0,0,0.1);
	z-index: 999;
	// overflow: hidden;
}
// 加载更多
.load-more {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 750rpx;
	height: 100rpx;
	font-size: 30rpx;
	color: #aaaaaa;
}
</style>
